class Swiper{
    constructor(container,options){
        this.container = this.getDom(container);

        this.wrapper = this.getDom('.swiper-wrapper',this.container);

        this.slides = Array.from(this.wrapper.children);

        this.default = {
            direction:'horizontal',
            autoplay:false,
            init:0
        };

        this.options = Object.assign({},this.default,options);

        this.init();
    }

    init(){
        this.setStyle();
        this.options.pagination && this.pagination();
        this.options.navigation && this.navigation();
        this.options.autoplay && this.autoplay();
    }

    autoplay(){
        this.container.onmouseenter = () => {
            clearInterval(timer);
        }

        this.container.onmouseleave = () => {
            this.autoplay();
        }

        let timer = setInterval(() => {
            this.nextMove()
        },this.options.autoplay)
    }

    navigation(){
        let {prevEle,nextEle} = this.options.navigation;
        let prevBtn = this.getDom(prevEle,this.container);
        let nextBtn = this.getDom(nextEle,this.container);
        prevBtn.style.display = 'block';
        nextBtn.style.display = 'block';

        prevBtn.onclick = () => {
            this.options.init--;
            this.options.init = this.options.init < 0 ? this.length - 1 : this.options.init;
            this.move();
            // this.wrapper.style.marginLeft = 
        }
        nextBtn.onclick = this.nextMove.bind(this);
    }

    nextMove(){
        this.options.init++;
        this.options.init = this.options.init > this.length - 1 ? 0 : this.options.init;
        this.move();
    }

    move(){
        //水平 marginLeft 垂直 marginTop
        let style = this.options.direction === 'horizontal' ? 'marginLeft' :'marginTop';
        let sizeStyle = this.options.direction === 'horizontal' ? 'width' : 'height';
        console.log(this.options.init*this[sizeStyle])
        this.wrapper.style[style] = `-${this.options.init*this[sizeStyle]}px`;
        this.wrapper.style.transition = 'all .3s';
    }

    pagination(){
        let pagination = this.getDom(this.options.pagination.el,this.container);
        for(let i = 0;i<this.length;i++){
            let li = document.createElement('li');
            pagination.appendChild(li);
            if(i === 0){
                li.classList.add('active');
            }
        }
    }

    setStyle(){
        this.width = this.container.offsetWidth;
        this.height = this.container.offsetHeight;

        //wrapper 宽  水平  垂直

        this.length = this.slides.length;

        if(this.options.direction === 'horizontal'){
            this.wrapper.style.width = `${this.width * this.length}px`;
            this.wrapper.style.height = `${this.height}px`;
            this.slides.forEach(item => {
                item.style.float = 'left';
            })
        }else{
            this.wrapper.style.width = `${this.width}px`;
            this.wrapper.style.height = `${this.height * this.length}px`;
            this.slides.forEach(item => {
                item.style.float = 'none';
            })
        }

        this.slides.forEach(item => {
            item.style.width = `${this.width}px`;
            item.style.height = `${this.height}px`;
        })

        console.log(this.width);
    }

    getDom(ele,parent){
        return typeof ele === 'object' ? ele : (parent || document).querySelector(ele)
    }
}

//结构 -- >  设置样式 --- > 添加事件 